<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
      //在ES6（二）有箭头函数的详细说明。
      /*
        箭头函数的定义形式（可以有多个参数）：
            (arg1, arg2) => {
              // 代码
            }
        当只有一个参数时，括号可以省略：
            arg => {

            }
        箭头函数的特点：
            不绑定this，从作用域链继承this。
            形式更简洁。
            不能作为构造函数（不能进行new操作）。
        
      */

      //fetch('http://localhost:1234/', {
      fetch('https://cnodejs.org/api/v1/topics?page=1&limit=5', {
        method: 'GET'
      })
      .then(res => { //1.拿到数据
        if (res.ok) { //res的状态
          console.dir(res);//查看一下res对象的自有属性和原型属性
          return res.text()
        }
        throw new Error(`${res.status} ${res.statusText}`)
      }) //2.解析数据
      .then(data => { // .then(function(data){
        // console.log("data:",data)
        return JSON.parse(data).data;//JSON解析
      }).then(dataArray=>{ //3.去使用数据(渲染页面)
        console.log("dataArray:",dataArray);
      })
      .catch(err => { //三个过程中都可能出现错误
        console.log(err.message)
      })
    </script>
  </body>
</html>
